<template>
	<view class="aplly-marker-wrapper">
		
		<view class="linear-gradient marker-userinfo">
			<view class="" :style="{ height: `${statusBarHeight}px`}"></view>
			<uni-nav-bar backgroundColor="rgba(255,255,255,0)" :border="false" left-icon="left" title="申请成为创客" @clickLeft="back" />
			<view class="user-info-content flex-c">
				<image :src="userInfo.portrait || '/static/images/default-img.png'" style="width: 90rpx; height: 90rpx;border-radius: 50%; margin-right: 30rpx;" mode=""></image>
				<text class="fz32">{{userInfo.nickName}}</text>
			</view>  
		</view>
		<view class="marker-information-wrapper mg24">
			<view class="marker-content">
				<view class="" style="margin-bottom: 12rpx;">
					购买创客资格可获得以下权益:
				</view>
				<template v-for="r of listRate" :key="r.id">
					<view class="fz24" v-if="r.rate > 0">{{r.content}} {{r.rate * 100}}%</view>
				</template>
			</view>
			<view class="marker-money flex-c">
				<text class="fz24" style="color: #8C5A6C;padding-right: 20rpx;">购买成为创客资格</text>
				<view class="fz48">¥ {{price}}</view>
			</view>
		</view>
		<view class="bottom-wrapper">
			<button class="public-large-btn" @click="upgrade()">立即申请</button>
		</view>
		
		<Payment ref="paymentNode" :disabledWeChatPay="true" :defaultPayType="payType" :disabledJinDou="true" @confirm="confirmHandle" @changeType="changeType" />
		
		<CustomeModal ref="customeModalNode" @confirmModal="confirmModal" @cancelModal="cancelModal" />
		
	</view>
</template>

<style>page{background-color: #f8f8fa;}</style>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { onShow, onReady } from '@dcloudio/uni-app'
import { updateUpgradePa, rewardProportion } from '@/http/my'
import { updateUserLoginInfo, awaitNextTick } from '@/utils/tools' 
import type { IUserInfo } from '@/types'
import { payType } from '@/config'

import Payment from '@/components/Payment.vue'
import CustomeModal from '@/components/CustomeModal.vue'

interface IListRate {
	id: number,
	business_type: number,
	relation: number,
	level: number,
	rate: number,
	remark: string
	content: string
}

export default defineComponent({
	components: {
		Payment, CustomeModal
	},
	setup() {
		const paymentNode = ref()
		const customeModalNode = ref()
		const state = reactive({
			userInfo: {} as IUserInfo,
			statusBarHeight: 20,
			price: 0,
			payType: 2,
			listRate: [] as Array<IListRate>
		})
		
		onShow(() => {
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					let user = JSON.parse(res.data || '{}');
					user && (state.userInfo = user || {})
				}
			})
		})
		
		onReady(() => {
			uni.getSystemInfo({
				success(res) {
					state.statusBarHeight = res.statusBarHeight || 20
				}
			})
			getProportion()
		})
		
		const upgrade = async () => {
			paymentNode.value.openLayer()
			// let res = await updateUpgradePa({payType: 2});
			// if(res.code === 0) {
				
			// 	uni.requestPayment({
			// 	    provider: 'alipay',
			// 	    orderInfo: res.data.payParam, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
			// 	    success: function (res) {
			// 			uni.showToast({
			// 				icon: 'success',
			// 				title: '支付成功',
			// 				async success() {
			// 					await updateUserLoginInfo(() => {
			// 						uni.navigateBack()
			// 					})
			// 				}
			// 			})
			// 	        console.log('success:', res);
			// 	    },
			// 	    fail: function (err) {
			// 	        uni.showToast({ title: '支付失败', icon: 'error'})
			// 	    }
			// 	});
			// }
			 
			// uni.hideLoading()
		}
		
		const getProportion = async () => {
			let res = await rewardProportion(); 
			if(res.code === 0) {
				state.price = res.data?.price || 0 
				if(res.data?.listRate && res.data?.listRate.length) {
					state.listRate = res.data?.listRate.map((item: IListRate) => ({
						...item,
						content: item.business_type == 1 ? '直推客户售前体验消费获得提成' : item.business_type == 2 ? '直推客户购买创客资格获得提成' : '直推客户充值金豆获得提成'
					}))
				}
			}
		}
		
		const back = () => uni.navigateBack();
		
		const changeType = (type: number) => state.payType = type;  // 切换支付类型
			
		const cancelModal = () => {
			//uni.showToast({ title: '已取消支付', icon: 'error' })  
		}
		
		const confirmModal = async (content: string) => {
			uni.showLoading({ title: '正在支付..' })
			let res = await updateUpgradePa({payType: state.payType, payPassword: content})
			if(res.code === 0) {
				await updateUserLoginInfo(async () => {
					uni.showToast({ title: '支付成功', icon: 'success' })
					await awaitNextTick()
					uni.navigateBack()
					uni.hideLoading()
				})
			} else {
				uni.showToast({
					title: res.msg || '请求失败',
					icon: 'none'
				})
				uni.hideLoading()
			} 
			customeModalNode.value.cancel()
		}
		
		const confirmHandle = async (type: number) => { // 确定支付回调
			state.payType = type
			if(state.payType === payType.PayTypeJinDou || state.payType === payType.PayTypeBalance ) {
				customeModalNode.value.showModal()
			} else {
				let res = await updateUpgradePa({payType: state.payType, payPassword: ''})
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: res.data.payParam, 
					success: function (res) {
						uni.showToast({
							icon: 'success',
							title: '支付成功',
							async success() {
								await updateUserLoginInfo(() => {
									uni.navigateBack()
								})
							}
						}) 
					},
					fail: function (err) {
						uni.showToast({ title: '支付失败', icon: 'error'})
					}
				});
			}
		}
		
		return {
			upgrade,
			back,
			changeType,
			confirmHandle,
			paymentNode,
			customeModalNode,
			cancelModal,
			confirmModal,
			...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.aplly-marker-wrapper{
	.marker-userinfo{
		.user-info-content{
			margin: 0 24rpx;
			padding-top: 60rpx;
		} 
	}
	.marker-information-wrapper{
		width: 702rpx;
		height: 330rpx;
		background-image: url(/static/images/Frame93@2x.png);
		background-position: center;
		background-size: 702rpx 330rpx;
		background-repeat: no-repeat;
		color: #53143A;
		.marker-content{ 
			padding: 46rpx 0 0 132rpx;
		}
		.marker-money{
			padding: 40rpx 0 0 32rpx;
		}
	}
}
</style>